<template>
  <div class="wrap">
    <div class="topTitle">活动管理 / 团队奖励 / 创建活动</div>
    <div class="subTitle">商户促活活动</div>
    <div class="listWrap">
      <div class="list">
        <div class="name">活动名称</div>
        <el-input
          v-model="form.activeName"
          :disabled="disNo"
          placeholder="请输入内容"
          style="width:300px"
        ></el-input>
      </div>
      <div class="list">
        <div class="name">考核时间周期</div>
        <el-date-picker
          :disabled="disNo"
          v-model="form.kaoTime"
          value-format="yyyy-MM-dd"
          style="width:300px"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="list">
        <div class="name">奖励发放时间</div>
        <el-date-picker
          :disabled="disNo"
          value-format="yyyy-MM-dd"
          v-model="form.rewardTimer"
          type="date"
          default-value="2020-03-05"
          placeholder="选择日期"
          style="width:300px !important"
        ></el-date-picker>
      </div>
      <div class="list">
        <div class="name">参与活动品牌</div>
        <el-select
          v-model="form.participate"
          :disabled="disNo"
          placeholder="请选择"
          style="width:300px"
        >
          <el-option
            v-for="item in participateArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="list">
        <div class="name">品牌类型</div>
        <el-select v-model="form.brandType" :disabled="disNo" placeholder="请选择" style="width:300px">
          <el-option
            v-for="item in brandTypeS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="list">
        <div class="name">商品型号</div>
        <el-select v-model="form.model" :disabled="disNo" placeholder="请选择" style="width:300px">
          <el-option
            v-for="item in modelGroup"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="subTitle">
      <div class="targetsUser">目标商户</div>
    </div>
    <div class="target">
      <!-- <div class="list">
        <div class="name">商户激活时间</div>
        <el-date-picker  :disabled="disNo" style="width:300px !important" v-model="form.merchants" type="date" placeholder="选择日期"></el-date-picker>
      </div>-->
      <div class="list">
        <div class="name">非活跃期间</div>
        <el-date-picker
          :disabled="disNo"
          style="width:300px"
          value-format="yyyy-MM-dd"
          v-model="form.noActive"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <!-- <div class="list"></div> -->
      <div class="list">
        <div class="name">收单交易额小于</div>
        <el-input
          :disabled="disNo"
          style="width:300px"
          v-model="form.turnoverSamll"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div class="list">
        <div class="name">收单交易笔数小于</div>
        <el-input
          style="width:300px"
          :disabled="disNo"
          v-model="form.turnoverSamllbi"
          placeholder="请输入内容"
        ></el-input>
        <!-- <el-button type="primary" style="margin-left:20px">查看</el-button> -->
      </div>
    </div>
    <!-- <div class="queryMerchants">目标商户数量:9999人</div> -->
    <div class="subTitle">目标设置值</div>
    <div class="targetSet">
      <div class="targetSet" v-for="(item,index) in promoteLiveList" :key="index">
        <div class="list sk">
          <div class="name">促活商户数量</div>
          <div class="zhi">
            <el-input
              :disabled="disNo"
              v-model="item.minCnt"
              style="width:145px"
              placeholder="请输入内容"
            ></el-input>&nbsp;-&nbsp;
            <el-input
              :disabled="disNo"
              v-model="item.maxCnt"
              style="width:145px"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="list">
          <div class="name">最低交易金额</div>
          <el-input
            :disabled="disNo"
            v-model="item.totalAmt"
            style="width:300px"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="list">
          <div class="name">最低交易笔数</div>
          <el-input
            :disabled="disNo"
            v-model="item.totalCnt"
            style="width:300px"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="list">
          <div class="name">奖励金额</div>
          <el-input
            :disabled="disNo"
            v-model="item.rewardAmt"
            style="width:300px"
            placeholder="请输入内容"
          ></el-input>元
          <el-button
            :disabled="disNo"
            type="primary"
            style="margin-left:20px"
            @click="addSection"
            v-if="index == 0"
          >添加奖励区间</el-button>
          <img
            v-if="index!=0"
            class="delList"
            @click="detail(index)"
            src="../../assets/images/del.png"
            alt
          />
        </div>
      </div>
    </div>
    <div class="btnGroup">
      <el-button type="primary" @click="nextPage">下一步</el-button>
      <el-button @click="result">取消</el-button>
      <!-- <button @click="dian">点击</button> -->
      <!-- <el-button @click="shijian">时间</el-button> -->
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      disNo: true,
      shows: false,
      userId:"",
      //提交的内容
      form: {
        activeName: "", //活动名称
        kaoTime: [], //考核时间周期

        kaoTimeStart: "", //考核周期开始时间
        kaoTimeEnd: "", //考核周期结束时间

        rewardTimer: "", //奖励发放时间
        participate: "", //参与品牌
        brandType: "", //品牌类型
        model: "", //商品型号
        merchants: "", //商户激活时间
        noActive: [], //非活跃时间
        noActiveStart: "", //非活跃时间开始
        noActiveEnd: "", //非活跃时间结束
        turnoverSamll: "", //收单交易额小于
        turnoverSamllbi: "",
        userNumSmall: "", //促活交易数量 小
        userNumBig: "", //促活交易数量  大
        minimumMoney: "", //最低交易金额
        transactionsNum: "", //最低交易笔数
        rewardMoney: "", //奖励金额
        cuUserSmall: "", //促活商户前  目标的
        cuUserBigger: "", //促活商户  后  目标的
        smallMoney: "", //最低交易金额  目标的
        smallMoneyNum: "", //最低交易笔数 目标的
        rewardMoneyTarget: "", //奖励金额 目标的
      },
      // 目标
      promoteLiveList: [
        // 促活商户数量a,b
        {
          cuNuma: "", //商户数量
          cuNumb: "", //商户数量
          smallMoney: "", //最低交易金额
          smallMoneyNum: "", //最低交易笔数
          rewardMoneyTarget: "", //奖励金额
        },
      ],
      // promoteLiveList: null,
      // 考核周期开始
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      //   考核结束
      rewardTimer: "", //奖励发放时间
      //   参与活动品牌
      participateArr: null,
      participate: "",
      // 品牌类型
      brandTypeS: null,
      brandType: "",
      // 商品型号
      modelGroup: null,
      model: "",
    };
  },
  methods: {
    addSection() {
      this.promoteLiveList.push({
        cuNuma: "", //商户数量
        cuNumb: "", //商户数量
        smallMoney: "", //最低交易金额
        smallMoneyNum: "", //最低交易笔数
        rewardMoneyTarget: "", //奖励金额
      });
    },
    detail(num) {
      this.promoteLiveList.splice(num, 1);
    },
    shijian() {},
    nextPage() {
      this.$router.push({
        path: "nextActive",
        query:{
          uid:this.uid
        }
      });
    },
    dian() {
      console.log(this.form.merchants);
      // this.form.kaoTimeStart = this.form.kaoTime[0]
      // this.form.kaoTimeEnd = this.form.kaoTime[1]
      // console.log(this.form.noActive)
      // this.form.noActiveStart = this.form.noActive[0]
      // this.form.noActiveSEnd = this.form.noActive[1]
      // alert(this.form.kaoTime)
      // // 提交的时候要
      // this.form.kaoTime.split(",")
      // alert(JSON.stringify(this.form.kaoTime))
    },
    result() {
      this.$router.push({
        path: "reward",
      });
    },
  },
  created() {
    this.disNo = this.$route.query.isSshow;
    this.shows = this.$route.query.shows;
    let uid = this.$route.query.uid;
    this.uid = uid
    console.log(uid);
    axios
      .post("/api/active/queryUpdateActive", { activeUid: uid })
      .then((res) => {
        console.log("会先");
        console.log(res);
        this.form.activeName = res.data.data.activeName; // 活动名称
        this.promoteLiveList = res.data.data.promoteLiveList;
        // 考核时间周期
        this.form.kaoTime.push(res.data.data.startDate);
        this.form.kaoTime.push(res.data.data.endDate);
        // this.form.rewardTimer.push(res.data.data.rewardDate)
        this.form.participate = res.data.data.channelName;
        this.form.brandType = res.data.data.channelType;
        this.form.noActive.push(res.data.data.inactBeginDate);
        this.form.noActive.push(res.data.data.inactEndDate);
        this.form.turnoverSamll = res.data.data.inactiveAmt;
        this.form.turnoverSamllbi = res.data.data.inactiveCnt;
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped>
.wrap {
  width: 96%;
  margin: 0 auto;
}
.listWrap {
  display: flex;
  flex-wrap: wrap;
}
.list {
  display: flex;
  align-items: center;
  /* width: 33.3333%; */
  width: 450px;
  margin-bottom: 20px;
}
.name {
  width: 120px;
  text-align: right;
  margin-right: 10px;
}
.topTitle {
  font-size: 16px !important;
  /* font-weight: bold; */
  margin-bottom: 20px;
  margin-top: 40px;
}
.subTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}
.target {
  display: flex;
  flex-wrap: wrap;
}
.target .list {
  /* width: 33.3333%; */
  width: 450px;
  justify-content: left;
}
.queryMerchants {
  height: 60px;
  margin-top: 15px;
  margin-bottom: 30px;
  line-height: 60px;
  text-indent: 20px;
  background: #f5f7fa;
}
.zhi {
  display: flex;
  align-items: center;
}
.targetSet {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}
.targetSet .list {
  width: 50%;
  display: flex;
}
@media screen and (max-width:1380px){
  .targetSet .list{
    width: 100%;
    /* display: block; */
  }
}
.delList {
  cursor: pointer;
}
.btnGroup {
  margin-top: 30px;
}
/deep/ .el-range-separator {
  width: 50px;
}
.sk .el-input {
  width: 150px !important;
}
/deep/ .sk .el-input__inner {
  width: 150px;
}
.targetsUser {
  font-size: 16px;
  color: #303133;
}
.subTitle {
  font-size: 16px;
  color: #303133;
}
</style>